<!-- 武器挂载 -->
<script setup lang="ts">
import { getWeaponMounted } from "@@/apis/scn"
import { ref } from "vue"

interface Props {
  id: string
}

const props = defineProps<Props>()

// 状态和引用
const visible = ref(false)
const data = ref([])

// 表格列定义
const columns = [
  {
    label: "武器系统",
    prop: "name",
    minWidth: 150,
    showOverflowTooltip: true
  },
  {
    label: "最大挂载",
    prop: "maxCount",
    width: 100
  },
  {
    label: "当前挂载",
    prop: "count",
    width: 100
  },
  {
    label: "是否可用",
    prop: "status",
    width: 100
  }
]

/**
 * 获取武器挂载详情
 */
function handleDetail() {
  return new Promise((resolve) => {
    if (props.id) {
      getWeaponMounted(props.id).then(({ data: responseData }) => {
        data.value = responseData
        resolve(responseData)
      })
    } else {
      resolve([])
    }
  })
}

/**
 * 显示武器挂载对话框
 */
async function handleShowDialog() {
  // 查询武器列表
  await handleDetail()
  visible.value = true
}

/**
 * 关闭对话框
 */
function handleCancel() {
  visible.value = false
}

// 暴露方法给父组件
defineExpose({
  handleShowDialog
})
</script>

<template>
  <el-dialog
    v-model="visible"
    title="武器挂载"
    width="800px"
    :close-on-click-modal="false"
    class="weapon-mount-dialog"
  >
    <el-table
      :data="data"
      border
      size="small"
      max-height="400"
      row-key="id"
      :default-expand-all="true"
      :tree-props="{ children: 'weaponList' }"
    >
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :label="column.label"
        :prop="column.prop"
        :min-width="column.minWidth"
        :width="column.width"
        :show-overflow-tooltip="column.showOverflowTooltip"
      >
        <template #default="{ row }" v-if="column.prop === 'status'">
          <span v-if="row.type !== 'model'">{{ row.status ? '不可用' : '可用' }}</span>
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <el-button @click="handleCancel">
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.weapon-mount-dialog {
  :deep(.el-dialog__body) {
    padding: 10px 20px;
  }

  :deep(.el-table) {
    --el-table-border-color: var(--el-border-color-lighter);

    .el-table__row {
      .cell {
        padding: 8px;
      }
    }
  }
}
</style>
